<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    :title="actionStatus == 'edit' ? '修改角色权限' : '新建角色权限'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 5 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="角色名称" v-bind="validateInfos.name">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.name"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="角色描述">
            <a-textarea
              allow-clear
              v-model:value="form.description"
              placeholder="请输入"
              :rows="4"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="门店权限">
            <a-checkbox-group
              style="width: 100%"
              v-model:value="store_ids"
              @change="changeCheckbox($event, 1)"
            >
              <a-row style="margin-top: 6px">
                <a-col
                  :span="8"
                  v-for="(item, index) in storeArr"
                  :key="index"
                  style="margin-bottom: 16px"
                >
                  <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
          <a-form-item label="仓库权限">
            <a-checkbox-group
              style="width: 100%"
              v-model:value="cangku_ids"
              @change="changeCheckbox($event, 4)"
            >
              <a-row style="margin-top: 6px">
                <a-col
                  :span="8"
                  v-for="(item, index) in cangkuArr"
                  :key="index"
                  style="margin-bottom: 16px"
                >
                  <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
          <a-form-item label="货品权限">
            <a-checkbox-group
              style="width: 100%"
              v-model:value="secret_rule"
              @change="changeCheckbox($event, 2)"
            >
              <a-row style="margin-top: 6px">
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-checkbox value="1">私密数据</a-checkbox>
                </a-col>
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-checkbox value="2">供应商</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
          <a-form-item label="客户权限">
            <a-checkbox-group
              style="width: 100%"
              v-model:value="customer_rule"
              @change="changeCheckbox($event, 3)"
            >
              <a-row style="margin-top: 6px">
                <a-col :span="24" style="margin-bottom: 16px">
                  <a-checkbox value="1">查看手机号</a-checkbox>
                </a-col>
                <a-col :span="24" style="margin-bottom: 16px; color: #999">
                  <span
                    >【订单管理】【销售明细】【质保单管理】【历史销售记录】</span
                  >
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
          <a-form-item label="查看数据时间">
            <a-radio-group
              style="width: 100%"
              v-model:value="data_range"
              @change="changeRadio"
            >
              <a-row style="margin-top: 6px">
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-radio value="0">不限</a-radio>
                </a-col>
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-radio value="30">30天</a-radio>
                </a-col>
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-radio value="60">60天</a-radio>
                </a-col>
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-radio value="90">90天</a-radio>
                </a-col>
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-radio value="180">180天</a-radio>
                </a-col>
                <a-col :span="8" style="margin-bottom: 16px">
                  <a-radio value="366">366天</a-radio>
                </a-col>
              </a-row>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import { detail } from '@/api/user/role';
  import {
    get_store_select,
    get_warehouse_select
  } from '@/api/material/select';
  // 表格列配置
  const useForm = Form.useForm;

  const emit = defineEmits(['done', 'update:visible']);

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    editDataId: [String, Number],
    actionStatus: String
  });

  // 提交状态
  const loading = ref(false);
  const storeArr = ref([]);
  const store_ids = ref([]);
  const cangku_ids = ref([]);
  const cangkuArr = ref([]);
  const secret_rule = ref([]);
  const customer_rule = ref(['0']);
  const data_range = ref('0');

  // 表单数据
  const form = reactive({
    role_id: '',
    name: '',
    description: '',
    store_ids: '',
    warehouse_ids: '',
    secret_rule: '',
    customer_rule: '0',
    data_range: '0'
  });

  onMounted(() => {
    form.role_id = props.editDataId;
    get_store_select({ page: 1, page_size: 9999 }).then((res) => {
      storeArr.value = res;
    });
    get_warehouse_select({ page: 1, page_size: 9999 }).then((res) => {
      cangkuArr.value = res;
    });
    if (props.editDataId) {
      detail({ role_id: props.editDataId }).then((res) => {
        Object.keys(form).map((key) => {
          form[key] = res && res[key] ? String(res[key]) : '';
        });
        form.role_id = res.id;
        if (res.store_ids.indexOf(',') >= 0) {
          store_ids.value = res.store_ids.split(',');
        } else {
          store_ids.value = [res.store_ids];
        }
        if (res.warehouse_ids.indexOf(',') >= 0) {
          cangku_ids.value = res.warehouse_ids.split(',');
        } else {
          cangku_ids.value = [res.warehouse_ids];
        }
        if (res.secret_rule == 3) {
          secret_rule.value = ['1', '2'];
        } else {
          res.secret_rule = res.secret_rule.toString();
          secret_rule.value = [res.secret_rule];
        }
        res.customer_rule = res.customer_rule.toString();
        customer_rule.value = [res.customer_rule];
        data_range.value = res.data_range.toString();
      });
    }
  });

  const changeCheckbox = (e, index) => {
    if (index == 1) {
      //门店权限
      form.store_ids = e.join(',');
    } else if (index == 2) {
      //货品权限
      if (e.length > 1) {
        form.secret_rule = 3;
      } else {
        form.secret_rule = e.join(',');
      }
    } else if (index == 3) {
      //客户权限
      if (e.length > 0) {
        form.customer_rule = e.join(',');
      } else {
        form.customer_rule = 0;
      }
    } else if (index == 4) {
      //仓库权限
      form.warehouse_ids = e.join(',');
    }
  };
  const changeRadio = (e) => {
    console.log(e);
    form.data_range = e.target.value;
  };

  // 表单验证规则
  const rules = reactive({
    name: [
      {
        required: true,
        message: '请输入角色名称',
        type: 'string',
        trigger: 'change'
      }
    ]
  });

  const { validate, validateInfos } = useForm(form, rules);

  /* 保存*/
  const save = () => {
    validate()
      .then(() => {
        console.log('form', form);
        emit('done', form);
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
